<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<h1>这是父组件</h1>
				<!-- msg是父组件实例里面data的msg 传递给子组件的parentmsg，
					子组件通过props接收 -->
				<com2 :parent-msg="msg" @func="show"></com2>
			</div>
		</div>

		<!-- 创建子组件 -->
		<template id="tem1">
			<div>
				<h3>我是子组件 -----{{parentMsg}}</h3>
				<button @click="myclick">点击</button>
			</div>
		</template>
		<script>
			let com2 = {
				template: '#tem1',
				data() {
					return {}
				},
				methods: {
					myclick() {
						this.$emit('func', '这是子组件传递过来的数据')
					},
				},
				props: ['parentMsg'],
			}
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '这是父组件的信息',
					count: 1,
				},
				methods: {
					show(data) {
						console.log('这是父组件的方法----' + data)
					},
				},
				components: {
					com2,
				},
				mounted() {
					window.addEventListener('beforeunload', (e) => {
						alert('刷新了')
					})
				},
			})
		</script>
	</body>
</html>
